<template>
	<view class="contai">
		<view class="const">
		<uni-easyinput type="text" placeholder="请输入1-100得数字" @input="inpt"></uni-easyinput>
		<button type="default" @click="btn()">确定</button>
		<view class="xia">
			<view class="lis" v-if="result" >
			<view >
			{{result}}
			</view>
			</view>
			
			<view class="lt" v-else>
			<text>数字小游戏</text>
			<ul class="ul">
				<li>输入1到100得数字</li>
			</ul>
			</view>
			
		</view>
	</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
			randomNum:0,
			     myInput:0,
			     result:"",
		colorlists: [
        'hsl(42, 48%, 54%)',
        'hsl(138, 24%, 48%)',
        'rgb(200, 138, 131)',
        'rgb(84, 221, 226)',
        'rgb(178, 199, 168)',
        'rgb(16, 195, 195)',
        'hsl(0, 21%, 68%)',
        'rgb(226, 166, 198)',
        'hsl(278, 17%, 66%)',
        'rgb(153, 199, 235)',
        'blueviolet'
      ]
			}
		},
		
		methods:{
			inpt(e){
				this.myInput=e
			}
			,
		btn(){
			 if(this.myInput==this.randomNum){
			      this.result = "恭喜：猜对了";
			     }else if(this.myInput>this.randomNum){
			      this.result = "啊哦！猜大了";
			     }else{
			      this.result = "啊哦！猜小了";
			     }
		}
		},
		mounted() {
		  var num = Math.floor(Math.random()*100);
		  console.log(num);
		  this.randomNum = num;
		  console.log(this.myInput)
	},
	watch:{
		
	}
	}
</script>

<style>
	   .contai{
	            width: 750rpx;
	            height: 100vh;
				padding: 40rpx 20rpx 0px 20rpx;
				background: #C8C7CC;
				
				box-sizing: border-box;
	        }
.const{
	/* width: 750rpx; */
	/* height: 60%; */
	    box-shadow: 8rpx 16rpx 14rpx #c0c0c0;
	padding: 40rpx 40rpx 40rpx 40rpx;
	background: #F8F8F8;
	}
	.xia{
		/* width: 750rpx; */
		
		/* height: 200rpx; */
		background:#007AFF;
	}
	.ul li{
		list-style: none;
		margin-left: 40rpx;
	}
	.b{
		padding: 5px;
		margin-left: 20rpx;
		float: left;
		color: #F0F0F0;
		/* background: #2B333F; */
		margin-top: 10rpx;
	}
	.lis{
		padding: 20rpx;
		background: #007AFF;
		overflow: hidden;
	}
	.lt{
		padding: 20rpx;
		background: #007AFF;
		overflow: hidden;
	}
</style>
